<script setup lang="ts">
import { ref, watch } from 'vue';
import _ from 'lodash';
import useSWRV from 'swrv';
import axios from 'redaxios';
import { useIntervalFn } from '@vueuse/core';


const apiRefreshCounter = ref(0);
function refreshDetailWebData() {
    apiRefreshCounter.value += 1;
}
const queryApiAddr = ref('/api/globalSetting?');
watch([apiRefreshCounter], function () {
    queryApiAddr.value = '/api/globalSetting?' + "&c=" + apiRefreshCounter.value;
});
const { pause, resume, isActive } = useIntervalFn(async () => {
    await refreshDetailWebData();
}, 1000);
const { data, error } = useSWRV(queryApiAddr, async () => {
    const wiFanList = await axios({
        method: 'GET',
        url: `/api/globalSetting/get`,
        headers: {
        },
    });

    return wiFanList.data as {
        enableControl: boolean,
        startupOnWin: boolean,
    };
}, {
    revalidateOnFocus: true,
});

async function setProfileFlag(flags: { enableControl?: boolean, startupOnWin?: boolean, }) {
    await axios.post("/api/globalSetting/setFlag", {
        ...flags,
    });
    refreshDetailWebData();
}
</script>

<template>
    <div v-if="error">failed to load</div>
    <div v-if="!data">loading...</div>
    <div v-if="data" style="padding:  20px 50px;">
        <n-h2 prefix="bar" align-text>
            <n-text type="primary">
                全局启用控制
            </n-text>
        </n-h2>

        <div class="hh3"></div>
        <n-grid cols="1 300:2 500:3 700:4 1280:10">
            <n-gi>
                <n-text depth="3"> 全局启用控制 </n-text>
            </n-gi>
            <n-gi>
                <div>
                    <n-switch :round="false" :value="data?.enableControl"
                        @click="() => setProfileFlag({ enableControl: !data?.enableControl })">
                        <template #checked>
                            启用控制
                        </template>
                        <template #unchecked>
                            禁用控制
                        </template>
                    </n-switch>
                </div>
            </n-gi>
        </n-grid>
        <div class="hh5"></div>


        <n-grid cols="1 300:2 500:3 700:4 1280:10">
            <n-gi>
                <n-text depth="3"> 开机自启 </n-text>
            </n-gi>
            <n-gi>
                <div>
                    <n-switch :round="false" :value="data?.startupOnWin"
                        @click="() => setProfileFlag({ startupOnWin: !data?.startupOnWin })">
                        <template #checked>
                            开机自启
                        </template>
                        <template #unchecked>
                            禁止自启
                        </template>
                    </n-switch>
                </div>
            </n-gi>
        </n-grid>
        <div class="hh5"></div>

        <n-h2 prefix="bar" align-text>
            <n-text type="primary">
                关于
            </n-text>
        </n-h2>

        <n-text>
            <p>@起床 - 2023</p>
            <p>基于：
                <n-ul>
                    <n-li v-for="item in [
                        { link: 'https://github.com/LibreHardwareMonitor/LibreHardwareMonitor', label: '硬件控制：LibreHardwareMonitor' },
                        { link: 'https://github.com/unosquare/embedio', label: '服务器：embedio' },
                        { link: 'https://tabler.io/icons', label: '图表库： tabler' },
                        { link: 'https://github.com/tusen-ai/naive-ui', label: 'web框架： naive-ui' },
                        { link: 'https://github.com/dahall/TaskScheduler', label: '计划任务： TaskScheduler' },
                       
                    ]">
                        <n-a :href="item.link"> {{ item.label }} </n-a>
                    </n-li>
                </n-ul>
            </p>

            <p>源码： <n-a href="https://gitee.com/endlesstravel/fan-motion-wink"> gitee : https://gitee.com/endlesstravel/fan-motion-wink </n-a></p>
        </n-text>
    </div>
</template>

<style scoped>
.hh3 {
    width: 1px;
    height: 22px;
}

.hh5 {
    width: 1px;
    height: 52px;
}
</style>